<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>逛水果店</title>
	<style>
		.heard{
			font-size: 16px;
			text-align: center;
		}
		.apple{
			font-size: 16px;
			font-weight: bolder;
			text-align: center;
			border: 1px solid black;
		
		}
		.please{
			text-align: center;
			border: 1px solid black;
	
		
		}
		.buy{
			display: block;
		margin-bottom: 5px;
		margin: 0 auto;

		}
		.checkout{
			text-align: center;
			border: 1px solid black;
	
		}

	</style>
</head>
<body>
	<div id="app">
		<div class="heard">欢迎光临_vue开发的收银系统_水果店</div>
		<div class="apple">苹果10￥/斤,折扣 <8折></div>
		<div class="list">
			<div class="please">请输入你要购买的斤数
				<input type="text" placeholder="0" v-model.number="textin"></div>
		</div>
		<button class="buy" @click="btn">结账买单~</button>
		<div class="checkout">总价:{{total}}￥元 折后价:{{totalprice}}￥元 省下:{{totalnum}}￥元</div>
	</div>
	<script src="./vue.js"></script>
	<script>
		const app = new Vue({
			el:'#app',
			data:{
				textin:0,
				total:0,
				totalprice:0,
				totalnum:0

			},
			methods:{
				btn(){
					this.total = this.textin * 10
					this.totalprice = this.total * 0.8
					this.totalnum = this.total * 0.2
				}

			},
		
		})
	</script>
	
</body>
</html>